<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<select id="province"><option value="">-请选择-</option></select>
	<select id="city"><option value="">-请选择-</option></select>
	<select id="area"><option value="">-请选择-</option></select>
	
	<script type="text/javascript">
		var provinceOjb = document.getElementById("province");
		var cityOjb = document.getElementById("city");
		var areaOjb = document.getElementById("area");
		var province = ["福建省","广东省"];
		var city = [
			["厦门市","福州市","漳州市","泉州市"],
			["广州市","深圳市","汕头市"]
		];
		var area = [
			[["湖里区","翔安区"],["晋安区","鼓楼区","永泰县","长乐县"],["龙海市","漳浦县"],["泉州县1","全州县2"]],
			[["广州区1","广州区2"],["深圳区1","深圳区2","深圳县3","深圳县4"],["汕头市1","汕头县2"]],
		];
		
		var arr_extent;
		
		function input_arr(arr,event){//封装一个函数，用于向下拉栏中添加元素
	        for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素，遍历数组
	            var option=new Option(arr[i],i);//创建Option对象（这个O要大写），存入值
	            event.appendChild(option);//把option添加到event对象的末尾
	        }
	    }
	
	    input_arr(province,provinceOjb);//调用,给省下拉栏添元素
	
	    provinceOjb.onchange= function () {//给下拉栏绑定事件（当下拉栏元素改变时执行）
	        cityOjb.options.length=1;//当省下拉栏改变时，清空市的下拉栏内元素
	        areaOjb.options.length=1;//当省下拉栏改变时，清空县的下拉栏内元素
	        var index=this.value;//每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
	        var arr_shi_next=city[index];//获取当前选择省的市元素并赋给一个数组
	        arr_extent=area[index];//获取当前选择省中市的县元素并赋给定义的中间数组
	        input_arr(arr_shi_next,cityOjb);//调用,给市下拉栏添元素
	    }
	
	    cityOjb.onchange= function () {
	        areaOjb.options.length=1;
	        var index=this.value;
	        var arr_xian_next=arr_extent[index];
	        input_arr(arr_xian_next,areaOjb);//调用,给县下拉栏添元素
	    }
	</script>
</body>
</html>